<template>
    <div class="rank">
        <div class="rank-list">
            <div class="rank-left">
                <div
                    :class="{ active: active == idx }"
                    v-for="(rank, idx) in ranks"
                    :key="idx"
                    class="rank-item"
                    @click="switchover(rank, idx)"
                >
                    {{ rank.name }}
                </div>
            </div>
            <div class="rank-right">
                <el-button
                    round
                    color="#e9ecec"
                    style="font-size: 16px; color: #999; padding: 0 15px"
                    size="large"
                    @click="showScreen"
                >
                    筛选 &nbsp;<el-icon v-if="!ScreenHandler">
                        <ArrowDown />
                    </el-icon>
                    <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </el-button>
            </div>
        </div>
        <div class="screen" v-show="ScreenHandler">
            <div class="skill" v-for="(ski, $index) in Screen" :key="$index">
                <div class="title">{{ ski.label }}:</div>
                <div class="skill-content">
                    <div
                        :class="{ select: s.isSelect }"
                        class="skill-item"
                        v-for="s in ski.choises"
                        :key="s.id"
                        @click="addSelect(s)"
                    >
                        {{ s.name }}
                    </div>
                </div>
            </div>
            <div
                v-if="selectArr.length || formatArr.length"
                class="reset"
                @click="reset"
            >
                重置
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "Rank",
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import homeApi, {
    type ProductionScreenModel,
    type ContentModel,
    type ScreenModel,
} from "@/api/mockHome";
import { ElMessage } from "element-plus";
import useHomeStore from "@/stores/modules/home";
import { cloneDeep } from "lodash";
const homeStore = useHomeStore();

interface RankModel {
    name: string;
    value: string;
}

const ranks = ref([
    {
        name: "综合榜",
        value: "integrated",
    },
    {
        name: "热练榜",
        value: "popTraining",
    },
    {
        name: "新锐榜",
        value: "newcomer",
    },
    {
        name: "最新",
        value: "lastest",
    },
]);

//切换高亮
let active = ref(0);

const switchover = (rank: RankModel, idx: number) => {
    homeStore.getProductionSynthesize(rank.value);
    active.value = idx;
};

const selectArr = ref<any>([]);
const formatArr = ref<any>([]);
const isSelect = ref(false);

const addSelect = (s: ScreenModel) => {
    const Item = Screen.value[0].choises.find((item) => item.name === s.name);
    if (Item) {
        if (selectArr.value.length === 3 && !s.isSelect) {
            ElMessage.info("同一筛选条件最多选择3个");
            return;
        }
        if (s.isSelect) {
            // console.log('删除', hobby.isSelect);
            // 修改当前点击的兴趣标签的选中状态
            // hobby.isSelect = false;
            // 删除当前点击的兴趣标签
            selectArr.value.forEach((item: any, index: number) => {
                if (item.name === s.name) {
                    selectArr.value.splice(index, 1);
                }
            });
            const Item = Screen.value[0].choises.find(
                (item) => item.name === s.name
            );
            // console.log(Item)
            // const Item = Screen.value.choises.find((item: { name: string; }) => item.name === s.name);
            if (Item) {
                Item.isSelect = false;
            }
            s.isSelect = false;
            return;
        }
        // 修改当前点击的兴趣标签的选中状态
        s.isSelect = true;
        selectArr.value.push(s);
    } else {
        if (s.isSelect) {
            formatArr.value.forEach((item: any, index: number) => {
                if (item.name === s.name) {
                    formatArr.value.splice(index, 1);
                }
            });
            const Item = Screen.value[0].choises.find(
                (item) => item.name === s.name
            );
            // console.log(Item)
            // const Item = Screen.value.choises.find((item: { name: string; }) => item.name === s.name);
            if (Item) {
                Item.isSelect = false;
            }
            s.isSelect = false;
            return;
        }
        s.isSelect = true;
        formatArr.value.push(s);
    }
};

const reset = () => {
    Screen.value.forEach((item) => {
        item.choises.forEach((i) => {
            i.isSelect = false;
            selectArr.value = [];
            formatArr.value = [];
        });
    });
};

const showScreen = () => {
    ScreenHandler.value = !ScreenHandler.value;
};

//获取筛选数据
let Screen = ref<ProductionScreenModel[]>([]);

let ScreenHandler = ref(false);
const getProductionScreen = async () => {
    try {
        const result = await homeApi.getProductionScreen();
        Screen.value = cloneDeep(result);
        console.log(result);
        // console.log(Screen.value)
    } catch (error) {
        console.log(error);
    }
};

onMounted(() => {
    getProductionScreen();
});
</script>

<style scoped lang="scss">
.rank-list {
    display: flex;
    align-items: center;
    margin-top: -15px;

    .rank-left {
        width: 1117px;
        display: flex;
        padding: 25px 30px;
        font-size: 14px;
        color: #7d8090;

        .rank-item {
            margin-left: 60px;

            &:nth-of-type(1) {
                margin-left: 0px;
            }
        }

        .active {
            color: #f93684;
        }
    }
}

.screen {
    // width: 1200px;
    padding: 26px 30px;
    font-size: 14px;
    position: relative;

    .skill {
        display: flex;
        flex-wrap: wrap;

        .title {
            color: #b1b5c1;
            padding: 7px 0;
            margin-right: 35px;
        }

        .skill-content {
            display: flex;
            width: 1045px;
            flex-wrap: wrap;

            .skill-item {
                // width: 100px;
                display: inline-block;
                color: #7d8090;
                padding: 7px 13px;
                margin-right: 24px;
                margin-bottom: 10px;
            }

            .skill-item.select {
                background-color: #f93684;
                color: #fff;
                border-radius: 4px;
            }
        }
    }
}

.reset {
    color: #f93684;
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 34px;
}
</style>
